<template>
  <div class="hammer-list">
    <HammerItem ref="jwItemRef" v-for="(item, index) in items" :key="index" :value="index" class="jw-item">
      <span style="font-size: 18px" class="jw-item-jie">{{ item.jie }}</span>
      <span class="star_underline">
        {{ item.data }}
      </span>
      <br />
    </HammerItem>
  </div>
</template>

<script>
import HammerItem from "./hammer-item.vue";
export default {
  name: "HammerList",
  components: { HammerItem },

  props: {
    modelValue: {
      type: Array,
      default: () => [],
    },
    items: {
      type: Array,
      default: () => [],
    },
  },
  emits: ["update:modelValue"],

  computed: {
    _modelValue() {
      return this.modelValue.map((id) => id);
    },
    /**
     * 渲染默认插槽内容
     * @returns {VNode[]} 插槽内容的虚拟DOM节点数组
     */
    children: function () {
      const slot = this.$slots.default();
      if (slot.length > 0) {
        return slot.at(0).children;
      }
      return [];
    },
  },
  methods: {
    updateModelValue(id) {
      const findres = this.modelValue.find((item) => item === id);
      if (findres !== void 0) {
        this.$emit(
          "update:modelValue",
          this.modelValue.filter((item) => item !== id)
        );
      } else {
        // eslint-disable-next-line no-shadow
        const m = this.modelValue.map((id) => id);
        m.push(id);
        this.$emit("update:modelValue", m);
      }
    },
    scrollToIndex(index) {
      this.$refs.jwItemRef[index].$el.scrollIntoView({
        block: "center",
      });
    },
  },
  watch: {
    modelValue: {
      handler(val) {
        this.$refs.jwItemRef.forEach((item, index) => {
          item.$onChange.call(item, ({ value }) => {
            this.updateModelValue(value);
          });
          item.change(val.includes(index));
        });
      },
      deep: true,
    },
  },
};
</script>
<style scoped lang="scss">
.jw-item {
  user-select: none;

  .jw-item-jie {
    user-select: none;

    &.active {
      position: relative;
      display: inline-block;
      width: 30px;
      height: 30px;
      // border: 1px solid red;
      border-radius: 100%;
      line-height: 30px;
      text-align: center;
      animation: bordertr 4s;
      animation-iteration-count: 1;
    }
  }
}
</style>
